<template>
	<!-- 商品分类组件 -->
	<view class="goods-category"
		:style="{ backgroundColor: newData.background , marginBottom: `${newData.pageSpacing}px` }" :class="
      newData.background && newData.background.indexOf('bg-') != -1
        ? newData.background
        : ''
    ">
		<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft" class="nav">
			<view class="scroll-list">
				<view class="item f24" :style="{  backgroundColor: newData.itemBackgroundColor||'#fff',
                            color: newData.itemColor||'#333',}" v-for="(item, index) in firstCategoryData" :key="index"
					@tap="tabSelect" :data-index="index">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<!-- <view class="margin-left-xs" style="width: 90%">
      <scroll-view
        scroll-x
        class="nav text-white text-df"
        scroll-with-animation
        :scroll-left="scrollLeft"
      >
        <view
          class="cu-item"
          :class="index == TabCur ? 'cur text-bold text-white text-lg' : ''"
          v-for="(item, index) in firstCategoryData"
          :key="index"
          @tap="tabSelect"
          :data-index="index"
        >
          {{ item.name }}
        </view>
      </scroll-view>
    </view> -->
		<!-- <view class="action">
      <navigator
        url="/pages/goods/goods-category/index"
        open-type="switchTab"
        hover-class="none"
        class="cuIcon-moreandroid text-white"
      ></navigator>
    </view> -->
	</view>
</template>

<script>
	const app = getApp();
	import api from "@/utils/api";

	export default {
		components: {},
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						background: ``,
					};
				},
			},
		},
		mounted() {
			if (this.$homeDivPageLoad) this.getData();
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				secondCategoryData: [],
				TabCur: 0,
				scrollLeft: 0,
				firstCategoryData: [{
					id: "-1",
					name: "首页",
				}, ],
				page2: {
					searchCount: false,
					current: 1,
					size: 10,
				},
				loadmore2: true,
				goodsList2: [],
			};
		},
		methods: {
			//商品分类
			getData() {
				api.goodsCategoryTree().then((res) => {
					this.firstCategoryData = [...this.firstCategoryData, ...res.data];
				});
			},
			tabSelect(e) {
				let TabCur = e.currentTarget.dataset.index;
				uni.setStorage({
					key: "param-goods-category-index",
					data: TabCur - 1,
				});
				if (TabCur > 0) {
					uni.switchTab({
						url: "/pages/goods/goods-category/index",
					});
				}
			},
		},
	};
</script>

<style scoped lang="scss">

.nav {
  padding: 0 20rpx;
}
.item {
  padding: 5rpx 20rpx;
  margin-left: 16rpx;
  border-radius: 30rpx;
  font-size: 26rpx;

  &:first-child {
    margin-left: 0;
  }
}
.scroll-list {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 20rpx 0;
}
</style>
